<template>
	<view class="bg-white" :style="[AppSkinVar]">
		<view class="nearby-order-err__box e-flex e-flex-column ">
			<image class="e-m-b-38" :src="$staticPath('order/error.png')"></image>
			<view class="e-m-b-20">
				{{ $t('order.支付失败') }}
			</view>
			<view class="e-m-b-60">{{ msg }}</view>
		</view>
		<view class="e-p-l-30 e-p-r-30 e-p-b-40">
			<view class="e-flex e-flex-between e-m-b-20">
				<text class="c-secondary">{{ $t('nearby.付款方式') }}</text>
				<text>{{ mode }}</text>
			</view>
			<view class="e-flex e-flex-between">
				<text class="c-secondary">{{ $t('nearby.收款方') }}</text>
				<text>{{ name }}</text>
			</view>
		</view>
		<view class="nearby-order-err__btn e-flex-xy-center bg-white">
			<view class="bg-primary c-white text-center" @tap="$back()">
				{{ $t('order.重新支付') }}
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { useInit } from '@/common/stores';
import { useCurrentInstance } from '@/common/hooks';

const props = defineProps({
	msg:String,
	mode: String,
	name:String
});

const ctx = useCurrentInstance();

const backHome = () => {
	useInit().setTabbarPageIndex(0);
	ctx.$switchTab('/pages/tabbar/index');
};
</script>

<style>
page {
	background: #f3f3f3;
	padding-bottom: 140rpx;
}
</style>

<style lang="scss" scoped>
.nearby-order-err__box {
	padding-top: 158rpx;
	margin: 0 auto;
	image {
		width: 320rpx;
		height: 224rpx;
	}
}
.nearby-order-err__btn {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 140rpx;
	> view {
		width: calc(100vw - 80rpx);
		padding: 24rpx 0;
		border-radius: 46rpx;
	}
}
</style>
